<template>
  <el-upload
    action="http://47.97.76.209:80/upload/excel"
    multiple
    :headers="{
      Authorization: 'Bearer ' + userStore.token
    }"
    :limit="3"
    :show-file-list="false"
    :on-change="handleUpload"
    :on-error="errorUpload"
  >
    <el-button type="primary" :icon="UploadFilled">上传表格</el-button>
  </el-upload>
</template>

<script setup lang="ts" name="ImportExcel">
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();
const emits = defineEmits(["success"]);

const handleUpload: UploadProps["onChange"] = (file: any) => {
  if (file.status === "success") {
    ElMessage.success(file.response.result);
    console.log("file.response.fileUrl", file.response?.fileUrl);
    emits("success", { url: file.response.fileUrl, name: file.response.filename });
  }
};

const errorUpload: UploadProps["onError"] = (error, file) => {
  if (file.status === "fail") {
    const message = JSON.parse(error.message);
    ElMessage.error(message.detail);
  }
};
</script>
<style lang="scss" scoped>
@import "./index";
</style>
